<template>
    <el-container class="home-container">
        <el-header>
            <div>
                <span>蜗牛学苑学生管理系统</span>
            </div>
            <!-- 登录状态框 -->
            <el-popconfirm confirm-button-text="好的" cancel-button-text="不用了"
                icon="el-icon-info" icon-color="red" title="确定要退出登录么？"
                @confirm="logout">
                <el-button slot="reference">{{ userInfo.username }}</el-button>
            </el-popconfirm>
        </el-header>
        <el-container>
            <el-aside width="180px">
                <!-- 跳转 -->
                <el-menu :default-active="$route.path" class="el-menu-demo"
                    background-color="#409EFF" unique-opened text-color="white"
                    active-text-color="yellow" router>
                    <!-- 路径配置 -->
                    <el-menu-item index="/index/chart">
                        <i class="el-icon-location"></i>
                        <span>首页</span>
                    </el-menu-item>
                    <el-submenu index='1'>
                        <template slot="title">
                            <i class="el-icon-user"></i>
                            <span>列表</span>
                        </template>
                        <el-menu-item index="/index/studentsList">学生列表
                        </el-menu-item>
                        <el-menu-item index="/index/classList">班级列表
                        </el-menu-item>
                        <el-menu-item index="/index/subjectsList">专业列表
                        </el-menu-item>
                        <el-menu-item index="/index/courseList">课程列表
                        </el-menu-item>
                        <el-menu-item index="/index/TeacherList">教师列表
                        </el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/index/add">
                        <i class="el-icon-setting"></i>
                        <span>新增系统</span>
                    </el-menu-item>
                </el-menu>
            </el-aside>
            <!-- 展示 -->
            <el-main>
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
export default {
    methods: {
        logout() {
            localStorage.clear();
            this.$router.push('/login');
        },
    },
    computed: {
        userInfo() {
            return this.$store.state.userInfo
        }
    }
};
</script>


<style lang="scss" scoped>
.home-container {
    height: 100vh;
    // overflow: hidden;
    .el-header {
        background-color: white;
        display: flex;
        justify-content: space-between;
        padding-left: 0;
        align-items: center;
        color: #000;
        font-size: 28px;
        > div {
            display: flex;
            align-items: center;
            height: 100%;
            span {
                margin-left: 15px;
            }
        }
    }

    .el-aside {
        background-color: #409eff;
        .el-menu {
            border-right: none;
        }
    }

    .el-main {
        background-color: #eaedf1;
    }
    .el-menu-item.is-active {
        background-color: #487cc6 !important;
        color: #fff;
    }
    i {
        color: white !important;
    }
}
</style>
